<template>
  <BaseCard class="h-full">
    <template #header>
      <div class="flex justify-between">
        <span class="title">通知公告</span>
        <el-button type="primary" size="small" @click="gotoMore">更多</el-button>
      </div>
    </template>
    <div class="list-wrap">
      <div class="head flex">
        <div class="flex-1">标题</div>
        <div>发布时间</div>
      </div>
      <div class="list-items">
        <div class="item flex" v-for="item in NoticeList">
          <div class="flex-1 truncate" @click="view(item)">
            {{item.noticeTitle}}
          </div>
          <div>{{item.createTime}}</div>
        </div>
      </div>
    </div>

         <!-- 添加或修改公告对话框 -->
      <el-dialog  v-model="open" width="60%" append-to-body>
      
<div class="no-breadNav-padd">
        <div class="article oneColumn">
            <h1 id="ti">
                  {{form.noticeTitle}}
            </h1>
            <div class="pages-date">
                发布时间:{{form.createTime}}
            </div>
            <div class="pages_content" id="UCAP-CONTENT">
                <div class="trs_editor_view TRS_UEDITOR trs_paper_default trs_web">
                   <p v-html="form.noticeContent"></p> 
                  </div>
            </div>
        </div>
    </div>
    
      </el-dialog>
  </BaseCard>
</template>

<script setup>
import BaseCard from "./BaseCard.vue";
import * as homeApi  from "@/api/home/index";
const { proxy } = getCurrentInstance();
const router = useRouter();
const open = ref(false);
const form=ref();
const  NoticeList=ref([])
const queryParam=reactive({
    pageNum: 1,
    pageSize: 6,
    isAsc: undefined,
    orderByValue: "desc",
    orderByColumn: "createTime",
    
})
/** 取消按钮 */
const cancel=() =>{
  open.value = false;

}
function view(row) {
    form.value = row;
    open.value = true;

}
const gotoMore=()=>{
      const obj = { path: "/home/NoticeList/", name: "UserNoticeList" };
      router.push(obj)

}

onMounted(async() => {

let  res  =  await homeApi.getNoticeList(queryParam);
if(res){
  NoticeList.value=res.rows
}
  
  
})
</script>

<style scoped lang="scss">
@import url("../index.scss");
.no-breadNav-padd {
    padding-top: 26px;
}
.oneColumn {
 
    padding: 0px 30px 30px 30px;
    margin: 0 auto;
}
.title1 {
    font-size: 24px;
    text-align: center;
    line-height: 56px;
    padding-top: 15px;
}
h1 {
    line-height: 56px;
    font-family: "微软雅黑", "宋体";
    font-size: 30px;
    text-align: center;
    padding: 0 0 26px;
    font-weight: normal;
}
.pages-date {
    position: relative;
    height: 35px;
    border-bottom: 1px #dcdcdc solid;
    padding-top: 7px;
    text-align: left;
}
.pages_content {
    line-height: 30px;
    margin: 0;
    padding: 20px 0 20px 0;
    font-size: 16px;
}
</style>
